<template>
  <div class="edit-password">
    <ComNavBar :title="t('Modify Password')" />

    <div class="container">
      <van-field v-model="password" :label="t('New Password')" style="min-height: 1rem; line-height: 1rem;" type="password" :placeholder="t('New Password')" />
    </div>

    <div class="btn">
      <van-button plain type="primary" @click="handleSubmit">{{t('Submit')}}</van-button>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { showToast, showLoadingToast, showSuccessToast } from 'vant'
import { useRouter } from 'vue-router'
import { post } from '@/utils/request'
import { t } from '@/languages'
const password = ref('')

const $router = useRouter()

async function handleSubmit() {
  if (!password.value) {
    return showToast('New Password Cannot be empty')
  }

  try {
    showLoadingToast({ message: 'Loading In...', duration: 0 })

    const res = await post('/api/app/changepassword/', {
      password: password.value,
    })

    console.log(res)

    showSuccessToast(t('Modified Success'))

    $router.push('/login')

  } catch (error) {
    console.log(error)
  }
}

</script>
<style lang="scss" scoped>
.container {
  margin: .26667rem;
  padding: .53333rem .4rem;

  .van-cell {
    border-radius: .13333rem;
    border: .02667rem solid #0f3a40;
    background: #0e1822;
  }

  :deep(.van-field__label) {
    color: #999;
    word-break: break-all;
  }

  :deep(.van-field__control) {
    color: #fff;
    @include setPlaceholder(#666);
  }
}

.btn {
  padding: .53333rem;

  .van-button {
    color: white;
    width: 100%;
    background: linear-gradient(to left, rgb(98, 247, 146), rgb(99, 253, 219));
    border: 0px;
  }

  :deep(.van-button__text) {
    color: #000;
    font-size: .4rem;
    font-weight: 600;
  }
}
</style>
